import { Component } from 'react';

import { Boxs  } from 'saltui';
const { HBox, Box,VBox } = Boxs;

import './rate.less';
import ItemTr from './ItemTr.js';

export default class Page extends Component {
  constructor(props) {
    super(props);
    this.state = {
      answer:this.props.answer,
      readOnly: this.props.readOnly
    }
  }

  onChange2(i, value){
    this.props.onChange(i, value);
  }

  render() {
    let t = this;
    let answer = this.state.answer;
    let theadTh = '', scoreTh = '', tbody = '';
    if(answer != null && answer.length > 0){
      theadTh = answer[0].list.map(function (item, i) {
        return (
          <th>{item.childOption}</th>
        )
      }.bind(this));
      scoreTh = answer[0].list.map(function (item, i) {
        return (
          <th>{item.optionScore}</th>
        )
      }.bind(this));
      tbody = answer.map(function (item, i) {
        let scores= item.list;
        var value = item.value;
        for(var j = 0; j < scores.length; j++){
          let obj = scores[j];
          if(parseInt(value) == j){
            obj.checked = true;
          }else{
            obj.checked = false;
          }
        }
        return (
          <ItemTr item={item} readOnly={t.state.readOnly} onChange={(value) => { t.onChange2(i,value); }}/>
        )
      }.bind(this));
    }
    
    return (
      <div className="t-OFA dd-ques-table t-PB12">
        <table className="t-BCf dd-table grey">
          <thead>
            <tr>
              <th></th>
              {theadTh}
            </tr>
            <tr>
              <th>分值</th>
              {scoreTh}
            </tr>
          </thead>
          <tbody>
            {tbody}
          </tbody>
        </table>
      </div>	
    );
  }
}



